<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="formRef"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
				label-width="77px"
			>
				<el-form-item
					:label="$t('common.belong_merchant') + ':'"
					class="flex-row-container"
				>
					<merchant-select
						v-model="queryData.merchantId"
						:merchantInfo.sync="merchantObj"
						:clearable="false"
					></merchant-select>
				</el-form-item>
				<el-form-item :label="$t('game.venue_name') + ':'">
					<el-select
						:placeholder="$t('common.select_all')"
						v-model="queryData.venueTypeCode"
						:clearable="false"
						collapse-tags
						style="width: 200px"
					>
						<el-option
							v-for="item in bwVenueList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="flex-row-container ptop">
					<el-select
						v-model="dataFlag"
						style="width:180px"
						:placeholder="$t('common.please_choose')"
						@change="handleChangeDataFlag"
					>
						<el-option label="限红模板名称" value="0" />
						<el-option label="限红模板ID" value="1" />
					</el-select>
					<el-input
						v-if="dataFlag == '0'"
						v-model.trim="queryData.templateName"
						clearable
						style="width:180px"
						:placeholder="$t('common.please_enter')"
						oninput="value=value.replace(/\s/g,'')"
					></el-input>
					<el-input
						v-if="dataFlag == '1'"
						v-model.trim="queryData.templateId"
						clearable
						style="width:180px"
						:placeholder="$t('common.please_enter')"
						oninput="value=value.replace(/[^\d]/g, '')"
					></el-input>
				</el-form-item>
				<!-- <el-form-item
					label="模版类型:"
					class="proxyItem flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.type"
						class="proxyInput"
						:placeholder="$t('common.select_all')"
						size="medium"
					>
						<el-option
							v-for="item in profitRankList"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item
					label="状态:"
					class="proxyItem flex-row-container"
				>
					<el-select
						v-model="queryData.shieldStatus"
						class="proxyInput"
						:placeholder="$t('common.select_all')"
						size="medium"
						clearable
					>
						<el-option label="已禁用" value="0" />
						<el-option label="开启中" value="1" />
					</el-select>
				</el-form-item>
				<!-- <el-form-item
					label="创建人:"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model.trim="queryData.createdBy"
						clearable
						:placeholder="$t('common.please_enter')"
						v-input="{ name: 'num_alp' }"
					></el-input>
				</el-form-item> -->
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						size="medium"
						:disabled="loading"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						:disabled="loading"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
				<el-form-item>
					<el-button
						type="success"
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						v-if="hasPermission('90630260')"
						@click="redLimitSyncFun()"
					>
						手动获取三方接口数据
					</el-button>
					<span
						style="color:#e1374c;font-size:14px;margin-left:20px;"
					>
						手动获取三方接口数据，最少间隔一分钟;会从厅方接口获取最新的模板信息
					</span>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				key="father"
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				ref="elTable"
				size="mini"
				class="small-size-table"
				:data="tableData"
				style="width: 100%"
				:max-height="tableHeight"
				highlight-current-row
				:header-cell-style="getRowClass"
			>
				<el-table-column
					prop="templateName"
					align="center"
					label="限红模板名称"
					show-overflow-tooltip
					min-width="200"
				>
					<template slot-scope="scope">
						<p>
							{{ scope.row.templateName || '-' }}
						</p>
					</template>
				</el-table-column>
				<el-table-column
					prop="templateId"
					align="center"
					label="模板ID"
					show-overflow-tooltip
					min-width="100"
				>
					<template slot-scope="scope">
						<p>
							{{ scope.row.templateId || '-' }}
						</p>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="场馆名称"
					show-overflow-tooltip
					min-width="150"
				>
					{{ queryVenueTypeCodeName || '-' }}
				</el-table-column>
				<el-table-column
					prop="agentName"
					align="center"
					label="所属商户名称"
					show-overflow-tooltip
					min-width="150"
				>
					{{ queryMerchantName || '-' }}
				</el-table-column>
				<el-table-column
					align="center"
					label="详情"
					show-overflow-tooltip
					min-width="100"
				>
					<template slot-scope="scope">
						<span
							v-if="isShowTemplateDetail(scope.row.venueTypeCode)"
							class="text-link"
							@click="getTemplateDetail(scope.row)"
						>
							模板详情
						</span>
						<span v-else>
							-
						</span>
					</template>
				</el-table-column>
				<!-- <el-table-column
					prop="type"
					align="center"
					label="模板类型"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<p>
							{{
								profitRankList[scope.row.type - 1].label || '-'
							}}
						</p>
					</template>
				</el-table-column> -->
				<el-table-column
					align="center"
					label="状态"
					prop="shieldStatus"
					min-width="150"
				>
					<template slot-scope="scope">
						<div
							v-if="scope.row.shieldStatus === 1"
							class="normalRgba"
						>
							开启中
						</div>
						<div
							v-if="scope.row.shieldStatus === 0"
							class="disableRgba"
						>
							已禁用
						</div>
					</template>
				</el-table-column>
				<!-- <el-table-column
					prop="createdBy"
					align="center"
					label="创建人"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<p>
							{{ scope.row.createdBy || '-' }}
						</p>
					</template>
				</el-table-column> -->
				<el-table-column
					fixed="right"
					align="center"
					:label="`${$t('common.actions')}`"
					width="200"
				>
					<template slot-scope="scope">
						<template v-if="hasPermission('90750071')">
							<el-button
								v-if="scope.row.shieldStatus === 0"
								:disabled="loading"
								type="success"
								size="medium"
								class="noicon"
								@click="changeStatus(scope.row)"
							>
								{{ $t('common.turn_on') }}
							</el-button>
							<el-button
								v-if="scope.row.shieldStatus !== 0"
								:disabled="loading"
								type="danger"
								size="medium"
								class="noicon"
								@click="changeStatus(scope.row)"
							>
								{{ $t('common.disabled') }}
							</el-button>
						</template>
						<template v-else>
							-
						</template>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size.sync="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>

		<el-dialog
			center
			:close-on-click-modal="false"
			:destroy-on-close="true"
			:visible.sync="syncData.visible"
			width="475px"
			height="475px"
			:before-close="handleCloseSyncDialog"
			@close="handleCloseSyncDialog"
		>
			<template v-if="syncData.loading">
				<div
					style="width: 100%;height:200px;position:unset !important;"
					v-loading="syncData.loading"
					element-loading-text="最新接口数据加载中"
					element-loading-spinner="el-icon-loading"
					element-loading-background="#4d4d4d"
				></div>
			</template>
			<template v-else>
				<div slot="title" style="text-align: left;">
					手动获取{{ queryVenueTypeCodeName }}最新限红模版
				</div>
				<div
					style="text-align: center;margin-top:30px;margin-bottom: 10px;"
				>
					<template v-if="syncData.result">
						最新接口数据获取成功
					</template>
					<template v-else style="text-align: center;">
						<div>最新接口数据获取失败！</div>
						<div>请稍后重试</div>
					</template>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="handleCloseSyncDialog">
						{{ $t('common.sure') }}
					</el-button>
				</div>
			</template>
		</el-dialog>
		<TemplateDetail
			v-if="detailData.visible"
			:curData="{
				venueName: queryVenueTypeCodeName,
				templateName: detailData.templateName
			}"
			:params="detailData.params"
			:visible.sync="detailData.visible"
			@handleVisible="detailData.visible = false"
		/>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
import TemplateDetail from './components/templateDetails.vue'

export default {
	name: routerNames.dataComparisonReport,
	components: {
		MainContent,
		TemplateDetail
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			exportLoading: false,
			queryData: {
				merchantId: this.$store.getters.merchantList[0].id,
				venueTypeCode: 'zr',
				templateName: '',
				templateId: '',
				shieldStatus: ''
			},
			tableData: [],
			dataFlag: '0',
			merchantObj: '',
			profitRankList: [
				{
					label: '基础限红模版',
					value: '1'
				},
				{
					label: '线路商限红模版',
					value: '2'
				},
				{
					label: '商户限红模版',
					value: '3'
				}
			],
			bwVenueList: [
				{
					code: 'zr',
					description: '真人场馆'
				},
				{
					code: 'ty',
					description: '体育场馆'
				}
				// {
				// 	code: 'dj',
				// 	description: '电竞场馆'
				// },
				// {
				// 	code: 'cp',
				// 	description: '彩票场馆'
				// },
				// {
				// 	code: 'qp',
				// 	description: '棋牌场馆'
				// },
				// {
				// 	code: 'dy',
				// 	description: '电子场馆'
				// }
			],
			syncTime: 0,
			syncData: {
				result: false,
				visible: false,
				loading: false
			},
			detailData: {
				visible: false,
				params: {},
				templateName: ''
			}
		}
	},
	computed: {
		queryVenueTypeCodeName() {
			return this.bwVenueList.find(
				(item) => item.code === this.queryData.venueTypeCode
			)?.description
		},
		queryMerchantName() {
			return this.$store.getters.merchantList?.find(
				(item) => item.id === this.queryData.merchantId
			)?.merchantName
		}
	},
	methods: {
		handleChangeDataFlag() {
			if (this.dataFlag == '0') {
				this.queryData.templateId = ''
			} else if (this.dataFlag == '1') {
				this.queryData.templateName = ''
			}
		},
		getTemplateDetail(row) {
			this.detailData = {
				visible: true,
				templateName: row.templateName,
				params: {
					merchantId: this.queryData.merchantId,
					templateId: row.templateId
				}
			}
		},
		isShowTemplateDetail(val) {
			// 只有体育和电竞场馆才能查看模板详情
			return ['ty', 'dj'].includes(val)
		},
		queryDataCheck() {
			if (!this.queryData.merchantId) {
				this.$message.warning('请选择所属商户')
				return true
			}
			if (!this.queryData.venueTypeCode) {
				this.$message.warning('请选择场馆名称')
				return true
			}
			return false
		},
		loadDatas() {
			if (this.queryDataCheck()) {
				return
			}
			let params = {
				...this.queryData
			}
			params = this.getParams(params)
			if (this.dataFlag == '0') {
				delete params.templateId
			} else if (this.dataFlag == '1') {
				delete params.templateName
			}
			this.tableData = []
			this.loading = true
			this.$api
				.getTemplatePage(params)
				.then((res) => {
					this.loading = false
					this.tableData = res?.data?.record || []
					this.total = res?.data?.totalRecord || 0
				})
				.catch(() => {
					this.loading = false
				})
		},
		search() {
			this.pageNum = 1
			this.loadDatas()
		},
		changeStatus(row) {
			this.$confirm(
				`<strong>是否对该配置进行${
					row.shieldStatus == 0 ? '开启' : '禁用'
				}操作?</strong>
			</br><span style='font-size:12px;color:#c1c1c1'>一旦操作将会立即生效</span>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					this.$api
						.redLimitSetShieldc({
							merchantId: this.queryData.merchantId,
							templateIds: [row.templateId],
							shieldStatus: row.shieldStatus == 0 ? 1 : 0,
							venueTypeCode: row.venueTypeCode
						})
						.then((res) => {
							if (res?.code === 200) {
								this.$message.success('操作成功')
								this.loadDatas()
							}
						})
				})
				.catch(() => {})
		},
		handleCloseSyncDialog() {
			this.syncData.visible = false
			if (this.syncData.result) {
				this.loadDatas()
			}
		},
		redLimitSyncFun() {
			if (this.queryDataCheck()) {
				return
			}
			if (Date.now() - this.syncTime < 60 * 1000) {
				this.$message.closeAll()
				this.$message.warning('手动获取三方接口数据，最少间隔一分钟')
				return
			}
			const param = {
				merchantId: this.queryData.merchantId,
				venueTypeCode: this.queryData.venueTypeCode
			}
			this.syncData = {
				result: false,
				visible: true,
				loading: true
			}
			this.$api
				.redLimitSync(param)
				.then((res) => {
					this.syncData.loading = false
					if (res.code == 200) {
						this.syncTime = Date.now()
						this.syncData.result = true
					}
				})
				.catch(() => {
					this.syncData.loading = false
				})
		},
		reset() {
			this.pageNum = 1
			this.queryData = {
				merchantId: this.$store.getters.merchantList[0].id,
				venueTypeCode: 'zr',
				templateName: '',
				templateId: '',
				shieldStatus: ''
			}
			this.merchantObj = ''
			this.dataFlag = '0'
			this.tableData = []
			// this.loadDatas()
		},
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadDatas()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadDatas()
		}
	}
}
</script>

<style lang="scss" scoped>
.tips-box {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -12px;
}
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
</style>
